<template>
  <el-dialog title="会员折扣设置" :close-on-click-modal="false" :visible.sync="visible" width="30%">
    <el-form v-loading="loading" :model="info" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
      <el-form-item label="折扣比例" prop="type">
        <el-radio v-model="info.use_default" :label="true" @change="open(true)">默认</el-radio>
        <el-radio v-model="info.use_default" :label="false" @change="open(false)">自定义</el-radio>
      </el-form-item>
      <!-- <div class="tip">* 如不开启单独分销则默认使用全局折扣比例</div> -->
      <div class="content" v-for="(item,i) in list" :key="i">
        <el-input :placeholder="'请输入'+item.role_name+'折扣'" @input="handleInput($event,i)" v-model="item.discount" type="number" :disabled="isInput">
          <template slot="prepend" class="wd120">{{item.role_name}}</template>
          <template slot="append">折</template>
        </el-input>
      </div>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  treeDataTranslate
} from '@/utils'
import serviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      visible: false,
      currId: null,
      loading: false,
      isInput: true,
      btnLoading: false,
      info: {},
      list: []
    }
  },
  methods: {
    init (id) {
      this.currId = id || null
      this.visible = true
      this.loadDiscount()
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].resetFields()
      // })
    },
    handleInput (value, i) {
      if (value != '') {
        if (value.indexOf('.') > -1) {
          this.list[i].discount = value.slice(0, value.indexOf('.') + 2)
        } else {
          this.list[i].discount = value
        }
      }
    },
    loadDiscount () {
      this.loading = true
      serviceApi.getGoodsDiscount(this.currId).then(res => {
        if (res.data && res.data.data) {
          this.info = res.data.data
          this.isInput = this.info.use_default
          if (Array.isArray(this.info.details) && this.info.details.length) {
            this.list = JSON.parse(JSON.stringify(this.info.details))
          }
        }
        this.loading = false
      }).then(res => {
        this.loading = false
      })
    },
    dataFormSubmit () {
      if (!this.verify(this.list)) {
        return false
      }
      this.btnLoading = true
      let param = {
        use_default: this.info.use_default,
        details: this.list
      }
      serviceApi.setGoodsDiscount(this.currId, param).then(res => {
        console.log(res)
        if (res.data && res.data.code == 200) {
          this.$message.success('设置成功！')
          this.$emit('result', true)
        }
        this.btnLoading = false
      }).then(res => {
        this.btnLoading = false
      })
    },
    verify (v) {
      let result = true
      if (Array.isArray(v)) {
        for (let item of v) {
          if (!(/^\d+(?=\.{0,1}\d+$|$)/.test(item.discount))) {
            this.$message.warning('请输入正确的' + item.role_name + '!')
            result = false
            return false
          }
        }
      } else {
        this.$message.warning('数据格式错误，请重新操作！')
        result = false
        return false
      }
      return result
    },
    cancel () {
      this.$emit('result', false)
    },
    // 折扣比例
    open (type) {
      this.isInput = type
      if (type) {
        this.list = JSON.parse(JSON.stringify(this.info.details))
      }
    }
  }
}
</script>

<style lang="scss">
.el-row {
  margin-top: 20px;
}

.el-input-group__prepend {
  width: 120px;
  text-align: center;
}

.tip {
  font-size: 14px;
  color: #d22049;
}

.content {
  margin-top: 20px;
  width: 70%;
}
</style>
